<template>
    <header>
        <div class="w1200">
            <span>{{ systemName }}</span>
            <div>
                <p class="logout" @click="logout">退出</p>
            </div>
        </div>
    </header>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name: 'SettledHeader',
    computed: {
        ...mapState('user', ['userInfo']),
        ...mapState('global', ['count']),
        orgCategoryId () {
            if (this.userInfo && this.userInfo.orgCategoryId) {
                return this.userInfo.orgCategoryId
            } else {
                return '0'
            }
        },
        systemName () {
            const roleType = Number(this.orgCategoryId)
            switch (roleType) {
            case 1:
                return '天作云超级管理员工作台'
            case 2:
                return '天作云运营管理员工作台'
            case 3:
                return '天作云运营人员工作台'
            case 4:
                return '天作云服务商工作台'
            case 5:
                return '天作云投资商工作台'
            default:
                return '天作云服务商工作台'
            }
        }
    },
    mounted () {},
    methods: {
        logout () {
            this.$store.dispatch('user/logout')
        }
    }
}
</script>

<style lang="less" scoped>
header {
    width: 100%;
    height: 0.76rem;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    .logout {
        height: 0.25rem;
        font-size: 0.18rem;
        font-weight: 400;
        line-height: 0.25rem;
        color: @primary-color;
        cursor: pointer;
    }
    .w1200 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow: inherit;
        span {
            color: @primary-color;
            font-weight: bold;
            font-size: 0.18rem;
        }
        & > div {
            display: flex;
            align-items: center;
            .ant-badge {
                margin-right: 30px;
                img {
                    width: 26px;
                    height: 26px;
                }
            }
            & > img {
                width: 25px;
                height: 32px;
                margin-right: 30px;
            }
            div {
                img {
                    width: 37px;
                    height: 35px;
                }
            }
        }
    }
}
</style>
